<template>
  <div id="app">
    <div class="container">
      <!-- <HmText></HmText> -->
      <!-- 导航栏 -->
      <HeaderNav>
        <template v-slot:head-left>
          本周热搜 TOP5
        </template>
      </HeaderNav>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 标签 -->
        <div class="tag">
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              #区域链
            </template>
            <template v-slot:right>
              96
            </template>
          </MainContent>
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              #数据挖掘
            </template>
            <template v-slot:right>
              91
            </template>
          </MainContent>
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              #无人机
            </template>
            <template v-slot:right>
              87
            </template>
          </MainContent>
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              #生命科学
            </template>
            <template v-slot:right>
              72
            </template>
          </MainContent>
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              #传感器
            </template>
            <template v-slot:right>
              60
            </template>
          </MainContent>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- <HmText></HmText> -->
      <!-- 导航栏 -->
      <HeaderNav>
        <template v-slot:head-left>
          <span>可能感兴趣的人</span>
        </template>
        <template v-slot:head-right>
          <span>换一批</span>
        </template>
      </HeaderNav>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 标签 -->
        <div class="tag">
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              <div>
                <span>李国盛 52岁</span><br>
                <span>研究领域:机电一体化技术</span><br>
                <span>哈尔滨工业大学-教授</span>
              </div>
            </template>
            <template v-slot:right>
              + 关注
            </template>
          </MainContent>
          <!-- 单个标签 -->
          <MainContent>
            <template v-slot:left>
              <div>
                <span>陈颖 36岁</span><br>
                <span>研究领域:人工智能</span><br>
                <span>清华大学-副教授</span>
              </div>
            </template>
            <template v-slot:right>
              + 关注
            </template>
          </MainContent>
        </div>
      </div>
    </div>
  </div>


</template>
<script>
// import HmText from './components/HmText.vue';
import HeaderNav from './components/HeaderNav.vue';
import MainContent from './components/MainContent.vue';
export default {
  name: 'App',
  components: {
    HeaderNav,
    MainContent,
  },
  data() {
    return {

    }
  }
}
</script>
<style>
#app {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .container {
    width: 450px;
    height: 600px;

    .content {
      width: 100%;
      height: 500px;
      background-color: #fff;

      .tag {
        width: 100%;
        height: 600px;
        padding-top: 30px;
      }
    }
  }
}
</style>
